<template>
  <div class="tableComparison">
    <div class="pubBig Medical">
      <div class="h0">
        <p class="lt">医疗类 - 医嘱与价表对照</p>
      </div>
      <div class="LeftMain">
        <div>
          <p class="p1">医嘱字典(支持一对零/一对一/一对多)(双击可删除选择的医嘱)</p>
          <div class="threeBox pucLab clearfix">
            <p>
              <button
                class="btn btn-info"
                @click="setYZDictionaries()"
              >his诊疗字典导入到本字典中</button>
            </p>
            <p>
              <label>拼音码/名称：</label>
              <input
                type="text"
                class="form-control"
                v-model="yzMc"
                style="width:120px"
              />
            </p>
            <p>
              <button
                class="btn btn-default"
                @click="getYZ()"
              >搜索</button>
            </p>
          </div>
          <div class="Tb">
            <el-table
              :data="yzData"
              border
              @row-click="tClick"
              :row-style="rowClass"
              style="width: 100%"
              class="table table-bordered"
            >
              <el-table-column
                prop="item_name"
                label="医嘱用语"
                width="100"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="item_class_name.name"
                label="医嘱类型"
                width="80"
                show-overflow-tooltip
              >

              </el-table-column>
              <el-table-column
                prop="item_exclude_name.name"
                label="排斥类型"
                width="80"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="item_classify_name.name"
                label="项目分类"
                width="80"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="item_sub_classify_name.name"
                label="项目子类"
                width="80"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="item_range_name.name"
                label="使用范围"
                width="80"
                show-overflow-tooltip
              >
              </el-table-column>

            </el-table>
          </div>
        </div>
        <div>
          <p class="p1">医嘱记账项目(双击可移除选择的项目)</p>
          <div class="Tb">
            <el-table
              ref="multipleTable"
              :data="yzPriceData"
              border
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChangeYZZL"
            >
              <el-table-column
                fixed="left"
                label="操作"
                width="50"
              >
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, yzPriceData)"
                    type="text"
                    size="small"
                  >
                    移除
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column
                prop="item_no"
                label="序号"
                width="50"
              >
              </el-table-column>
              <el-table-column
                prop="item_class_name"
                label="类别"
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="item_code"
                label="编码"
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="item_name"
                label="名称"
                width="120"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="amount"
                label="数量"
                width="50"
              >
              </el-table-column>
              <el-table-column
                prop="unit_name"
                label="单位"
                width="50"
              >
              </el-table-column>
              <el-table-column
                prop="charge_item_spec"
                label="规格"
                width="50"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="RightMain">
        <p class="p1">his字典(双击要添加的行即可添加到选择的医嘱记账项目中)</p>
        <div class="threeBox pucLab clearfix">
          <p>
            <label>拼音码/名称/编号：</label>
            <input
              type="text"
              class="form-control"
              style="width:150px"
            />
          </p>
          <p>
            <button
              class="btn btn-default"
              @click="getZLXM()"
            >搜索</button>
          </p>
          <p>
            <button
              class="btn btn-default"
              @click="saveYZZL()"
            >保存</button>
          </p>
        </div>
        <div class="Tb">
          <el-table
            ref="multipleTable"
            :data="zlxmData"
            border
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChangeZL"
          >
            <el-table-column
              type="selection"
              width="55"
            >
            </el-table-column>
            <el-table-column
              prop="item_code"
              label="项目编码"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="item_class_name.name"
              label="项目类别"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="item_name"
              label="项目名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="item_spec"
              label="项目规格"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="price"
              label="价格"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="unit_name.name"
              label="单位"
              show-overflow-tooltip
            >
            </el-table-column>

          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Bedinformation",
  data () {
    return {
      msg: "SystemManagement 下的 Bedinformation",
      yzData: [],
      yzPriceData: [],
      zlxmData: [],
      selectData: null,
      yzMC: "",
      item_class: -1,
      zlxmMC: "",
      selectZLData: [],
      selectYZZLData: [],
      selectZLObjList: [],
      //    ********************************************
    };
  },
  methods: {
    deleteRow (index, rows) {
      console.log("删除条目");
      console.log(rows[index]);
      this.deleteYZZL(rows[index].id);
      rows.splice(index, 1);
    },
    handleSelectionChangeZL (val) {
      this.selectZLData = val;
      console.log("选中诊疗项目：")
      console.log(val)
    },
    handleSelectionChangeYZZL (val) {
      this.selectYZZLData = val;
      console.log("选中医嘱诊疗项目：");
      console.log(this.selectYZZLData);
    },
    rowClass ({ row, rowIndex }) {//选中行样式
      if (this.selectData != null) {
        if ((this.selectData.item_code) === row.item_code) {
          return { "color": "#fff", "background-color": "#155a00" }
        }
      }
    },
    tClick (row) {//鼠标选中行赋值
      this.selectData = row;
      console.log("选中医嘱数据：")
      console.log(row)
      this.getYZPrice(row.item_code);
    },
    setYZDictionaries () {
      var data = {
        model: "11.综合维护-医嘱与价表对照",
        code: "11044",
        input: {}
      };
      console.log(data)
      this.$post("CloudHIS/Business_Handle", data)
        .then(res => {
          console.log("医嘱子项");
          console.log(res);
          getYZ();
        })
        .catch(err => {
          console.log(err);
        });
    },
    getYZ () {
      var data = {
        model: "11.综合维护-医嘱与价表对照",
        code: "11046",
        input: {
          jm: this.yzMC,
        }
      };
      console.log(data)
      this.$post("CloudHIS/Business_Handle", data)
        .then(res => {
          console.log("医嘱列表");
          console.log(res);
          this.yzData = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getYZPrice (item_code) {
      var data = {
        model: "11.综合维护-医嘱与价表对照",
        code: "11042",
        input: {
          item_code: item_code
        }
      };
      console.log(data)
      this.$post("CloudHIS/Business_Handle", data)
        .then(res => {
          console.log("医嘱子项");
          console.log(res);
          this.yzPriceData = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getZLXM () {
      var data = {
        model: "11.综合维护-医嘱与价表对照",
        code: "11045",
        input: {
          item_class: this.item_class,
          jm: this.zlxmMC
        }
      };
      console.log(data)
      this.$post("CloudHIS/Business_Handle", data)
        .then(res => {
          console.log("诊疗项目");
          console.log(res);
          this.zlxmData = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    saveYZZL () {
      this.selectZLData.forEach(we => {
        let obj = {
          amount: 1,
          item_class: we.item_class,
          item_code: we.item_code,
          item_spec: we.item_spec,
          unit: we.unit
        }
        this.selectZLObjList.push(obj);
        console.log("对照选中值");
        console.log(this.selectZLObjList);
      });
      // console.log("对照选中值");
      // console.log(this.selectZLData);
      var data = {
        model: "11.综合维护-医嘱与价表对照",
        code: "11041",
        input: {
          clinic_item_class: this.selectData.item_class,
          clinic_item_code: this.selectData.item_code,
          items: this.selectZLObjList
        }
      };
      console.log(data)
      this.$post("CloudHIS/Business_Handle", data)
        .then(res => {
          console.log("对照成功");
          console.log(res);
          this.getYZPrice(this.selectData.item_code);

          this.selectZLData = [];
          this.toggleSelection();
        })
        .catch(err => {
          this.selectZLObjList = [];
          console.log(err);
        });
    },
    deleteYZZL (id) {
      var data = {
        model: "11.综合维护-医嘱与价表对照",
        code: "11043",
        input: {
          id: id
        }
      };
      console.log(data)
      this.$post("CloudHIS/Business_Handle", data)
        .then(res => {
          console.log("删除对照项目成功");
          console.log(res);
          this.getYZPrice(this.selectData.item_code);
        })
        .catch(err => {
          this.selectZLObjList = [];
          console.log(err);
        });
    },
    /***************************************************/
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
  },//
  created () {
    if (this.$route.query.Token) {
      localStorage.setItem('Token', this.$route.query.Token)
    }
    this.getYZ();
    this.getZLXM();
  }
};
</script>


<style lang="scss">
.tableComparison {
  .Medical .LeftMain {
    position: absolute;
    left: 0;
    top: 44px;
    bottom: 0;
    width: 500px;
    border-right: 1px solid #ddd;
  }

  .Medical .LeftMain > div {
    height: 50%;
    position: relative;
  }

  .Medical .LeftMain .threeBox p:nth-child(2) {
    margin: 0 7px;
  }

  .Medical .LeftMain .threeBox {
    padding: 10px 10px 0 10px;
  }

  .Medical .LeftMain .threeBox + .Tb {
    top: 80px;
  }

  .Medical .LeftMain .Tb {
    overflow: auto;
    position: absolute;
    right: 10px;
    left: 10px;
    bottom: 5px;
    top: 33px;
  }

  .Medical .RightMain {
    padding-left: 500px;
    margin-top: -1px;
  }

  .Medical .RightMain .threeBox {
    padding: 10px 10px 5px 10px;
  }

  .Medical .RightMain .Tb {
    position: absolute;
    right: 10px;
    left: 510px;
    top: 124px;
    bottom: 0px;
    overflow-y: auto;
  }

  .Medical .RightMain .mark2 {
    margin-left: 20px;
  }

  .Medical .RightMain .mark2 label {
    background: none !important;
    border: none !important;
    padding-top: 1px;
    margin-right: 10px;
    cursor: pointer;
  }

  .Medical .RightMain .mark2 label input {
    position: relative;
    top: 2px;
    margin-right: 5px;
  }

  .el-table {
    font-size: 14px !important;
  }

  .el-table thead {
    color: #303133;
  }
}
</style>
